<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css特效</title>
		 <style>
		 	.moveBox{			
		 		margin: 10px;	/* 外边距四周空10个像素 */
		 		width: 100px;	/* 宽度 */
		 		height: 100px;	/* 高度 */
		 		background: #aa55ff;	/* 背景色 */
				position: relative;
		 		animation: mymove 5s infinite;/* 每隔5s循环播放动画mymove */
		 	}
		 	@keyframes mymove{			/* 定义动画关键帧 */
		 		from{ left: 0px; }		/* 移动的起始位置 */
		 		to{ left: 200px; }		/* 移动的结束位置 */
		 	}
		 
		 	.transitionBox{
				margin: 10px;
						width: 100px;
						height: 100px;
						background: #ee1166;
						transition: width 2s;	/* 宽度拉伸速度 */
					}
					.transitionBox:hover{		/* hover前不能有空格 */
						width: 300px;			/* 水平拉伸 */
						height: 100px;
					}
				
					ul{
						margin: 20px 0 0 10px;	/* 上右下左 */
						list-style: none;		/* 去掉点 */
					}
					li{
						float: left;			/* 紧跟后面不换行 */
						width: 100px;			/* 菜单宽度 */
						height: 30px;
						background: #ee1166;
						text-align: center;	/* 横向居中 */
						line-height: 30px;		/* 行高，纵向居中 */
						margin-right: 8px;		/* 菜单间距 */
						-webkit-transform: skewX(30deg);	/* 倾斜30° */
					}
					a{
						text-decoration: none;	/* 去掉链接的下划线 */
						-webkit-transform: skewX(-30deg);	/* 倾斜-30° */
						display: block;			/* 以块进行显示，字体摆正 */
						color: #fff;
					}
					li:hover{
						background: #008cf4;		
					}
				
				  </style>


	</head>
	<body>
		<div>移动效果：</div>
			<div class="moveBox"></div>
		
			<div>拉伸效果：</div>
			<div class="transitionBox"></div>
		
			<div>菜单效果：</div>
        <ul>
		<li><a href="http://www.baidu.cn">百度</a></li>
		<li><a href="http://www.tedu.cn">今日头条</a></li>
		<li><a href="http://www.tedu.cn">百度新闻</a></li>
		<li><a href="http://www.tedu.cn">凤凰新闻</a></li>
	</ul>

	</body>
</html>
